<template name="YNavBar">
  <view class="yContainerColumnCenter_h view_container" :style="{width: width}">
    <view class="YStatusBar" :style="{height: statusBarHeight,backgroundImage: statusBarBg}"></view>
    <view class="YNavBar yContainerRowCenter_v" :style="{height: navHeight,backgroundImage: statusBarBg}">
      <block v-if="title===''">
        <slot></slot>
      </block>
      <block v-else>
        <block v-if="canBack===true">
          <image class="image_icon image_back" :src="icon_back" mode="aspectFit" @click="onBackClick"></image>
          <text class="yContainerColumnCenter_v yWeight text_title" v-text="title" :style="{color:tintColor}"></text>
          <image class="image_icon"></image>
        </block>
        <block v-else>
          <text class="yContainerColumnCenter_v yWeight text_title" v-text="title" :style="{color:tintColor}"></text>
        </block>
      </block>
    </view>
  </view>
</template>
<script>
export default {
  name: "YNavBar",
  data() {
    return {
      statusBarBg: "",
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
      navHeight: uni.getSystemInfoSync().platform === "ios" ? "44px" : "48px",
      icon_back: "",
      width: uni.getSystemInfoSync().screenWidth + "px",
    }
  },
  props: {
    canBack: {type: Boolean, default: true},
    tintColor: {type: String, default: 'white'},
    title: {type: String, default: ""},
    bg: {type: String, default: ""},
  },
  created: function (e) {
    this.statusBarBg = this.yFree.yIsEmpty(this.bg) ? this.yFree.statusBar : this.bg;
    if (this.tintColor === 'white')
      this.icon_back = "";
    else if (this.tintColor === 'black')
      this.icon_back = "";
  },
  methods: {
    onBackClick: function () {
      this.yFree.yFinish();
    },
  }
}
</script>
<style scoped>
.YStatusBar {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.YNavBar {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.view_container {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.text_title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.image_icon {
  width: 25px;
  height: 25px;
  padding: 10px;
}
</style>
